<template>
	<view class="wrapperbox switch_tab_page">
		<view class="wrapper">
			<view class="dis-flex max_height flex-y-center">
				<view class="title f_28">姓名</view>
				<input class="uni-input f_28" v-model="form[0].value" placeholder="请输入姓名" />
			</view>
			<view class="dis-flex max_height flex-y-center">
				<view class="title ">电话</view>
				<input class="uni-input f_28" maxlength="11" v-model="form[1].value" placeholder="请输入手机号" />
			</view>
			<view class="dis-flex max_height flex-y-center flex-x-between">
				<view class="title">所在区域</view>
				<view class="dis-flex flex-y-center">
					<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
						{{regionName}}
					</pick-regions>
				</view>
			</view>
			<view class="uni-textarea"><textarea v-model="form[2].value" placeholder-style="color:#8f8f9a" placeholder="请填写详细地址" /></view>
		</view>
		<view @click="submit" :class="['btn f_32','dis-flex','flex-y-center','flex-x-center',form[0].value!=''&&form[1].value!=''&&form[2].value!=''?'bgimg':'']">提交</view>
	</view>
</template>

<script>
import pickRegions from '@/components/pick-regions/pick-regions.vue';
import API from '@/static/api/index.js'
import {isPoneAvailable} from '@/static/uitls/reg.js'
export default {
	components: {
		pickRegions
	},
	data() {
		return {
			type:'',//编辑还是添加 update=编辑。
			address_id:'',//地址id
			defaultRegion: ['广东省', '广州市', '海珠区'],
			defaultRegionCode: [1964,1965,1968],
			showBalanceLow: false, //是否地址弹出层
			form: [
				{ value: '' }, //姓名
				{ value: '' }, //电话
				{ value: '' } //具体地址
			],
			//地址列表
			addressList: [
				// {
				// 	status: 1, //是否选中-0未选中-1选中
				// 	detail: '广州市 天河区 前进街道 兰亭盛荟 7栋1604', //具体地址
				// 	name: 'LICHUAN', //名字
				// 	phone: '1888888888' //电话
				// },
			]
		};
	},
	computed: {
		regionName() {
			// 转为字符串
			return this.defaultRegion.join(' ');
		}
	},
	onLoad(options){
		// {province_id:item.province_id,city_id:item.city_id,area_id:item.area_id,address:item.address,username:item.username,phone:item.phone}
		// console.log("option.item---------------------------",decodeURIComponent(options.province_id))
		// this.defaultRegionCode[0]=decodeURIComponent(options.province_id)//省
		// this.defaultRegionCode[1]=decodeURIComponent(options.city_id)//市
		// this.defaultRegionCode[2]=decodeURIComponent(options.area_id)//区
		this.type=options.type
		this.address_id=options.address_id
		uni.setNavigationBarTitle({title:options.type=='update'?'编辑地址':'新增地址'});
		if(options.type=='update'){//编辑
			API.detailAddress(options.address_id).then(res=>{
				let {address} = res.data
				this.form[0].value=address.username,//姓名
				this.form[1].value=address.phone,//手机号
				this.defaultRegionCode[0]=address.province_id,//省id
				this.defaultRegionCode[1]=address.city_id,//省id
				this.defaultRegionCode[2]=address.area_id,//区县id
				this.form[2].value=address.address//区县id
			})
		}
	},
	methods: {
		submit(){
			let {form,defaultRegionCode}=this
			if(form[0].value!=''){
					if(isPoneAvailable(form[1].value)){
							if(form[2].value!=''){
								let obj={
									username:form[0].value,//姓名
									phone:form[1].value,//手机号码
									province_id:defaultRegionCode[0],//省id
									city_id:defaultRegionCode[1],//	市id
									area_id:defaultRegionCode[2],//	区县id
									address:form[2].value,//详细地址
									is_default:0//是否默认
								}
								if(this.type=='update'){
									//修改
									API.updAddress(this.address_id,obj).then(res=>{
										if(res.code==1){
											this.showToast('修改成功','success')
											setTimeout(() => {
												uni.navigateBack()
											}, 2000);
										}else{
											this.showToast(res.msg)
										}
									})
								}else{
									//添加
									API.addAddress(obj).then(res=>{
										if(res.code==1){
											this.showToast('添加成功','success')
											setTimeout(() => {
												uni.navigateBack()
											}, 2000);
										}else{
											this.showToast(res.msg)
										}
									})
								}
							}else{
								this.showToast('请填写正确的详细地址')
							}
					}else{
						this.showToast('请填写正确的手机号码')
					}
			}else{
				this.showToast('请填写正确的姓名')
			}
		},
		// 获取选择的地区
		handleGetRegion(arr) {
			let tempArr = [];
			let tempIdArr = [];
			arr.forEach(e=>{
				tempArr.push(e.name);
				tempIdArr.push(e.id);
			})
			this.defaultRegion = tempArr;
			this.defaultRegionCode = tempIdArr;
		}
	}
};
</script>

<style lang="scss" scoped>
.wrapperbox {
	background: #f7f7f8;
	height: 100vh;
}
.wrapper {
	background-color: white;
}
.title {
	width: 160rpx;
}
.max_height {
	height: 120rpx;
	margin: 0 48rpx;
	border-bottom: 1px solid #ededed;
}
.next-icon {
	width: 32rpx;
	height: 32rpx;
}
.uni-textarea {
	padding: 42rpx 48rpx;
	textarea {
		height: 144rpx !important;
		width: 100%;
	}
}
.btn {
	height: 92rpx;
	background-color: #f0f0f6;
	border-radius: 24rpx;
	margin: 48rpx;
	color: #d1d2db;
}

.bgimg{
	background-image: linear-gradient(270deg, 
		#7f4aff 0%, 
		#9254ff 100%);
	border-radius: 24rpx;
	color: white;
}
</style>
